<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <img id="tulip" src="images/small.jpg" alt="The Tulip" style="display:none;"/>
    <canvas width="500" height="500" id="c1"></canvas>
</body>
</html>
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext("2d");
        drawDir(oGC,50,50)
        var startX = 50;
        var startY = 50;
        var arr = [[50,50],[55,58],[62,60],[70,68],[100,102],[110,108],[120,125],[135,170],[200,200],[300,300]];
        var index = 0;
        drawDir(startX,startY);
        
        var timer1 = setInterval(function(){
            index++;
            if(index <= arr.length-1 ){
                startX = arr[index][0];
                startY = arr[index][1];
                drawDir(startX,startY)
            }else{
                clearInterval(timer1);
            }
            if(index < arr.length-1){
                drawLine(arr[index][0],arr[index][1],arr[index+1][0],arr[index+1][1])
            }
            
        }, 100);
        /*setInterval(function(){
            startX++;
            startY++;
            drawDir(startX,startY);
        }, 100)*/
        function drawDir(startX,startY){
            /*var yImg = new Image();
            var img=document.getElementById("tulip");
            oGC.drawImage(img,0,0);*/
            oGC.save();
            oGC.fillStyle = 'red';
            oGC.beginPath();
            oGC.moveTo(startX, startY);
            /*oGC.lineTo(startX+5, startY-10);
            oGC.lineTo(startX+10, startY);*/
            oGC.arc(startX,startY,5,0,360*Math.PI/180,false);
            oGC.closePath();
            oGC.globalCompositeOperation="source-over";
            oGC.fill();
            oGC.restore();
        }
        function drawLine(x0,y0,x1,y1){
            oGC.save();
            oGC.strokeStyle="red"
            oGC.beginPath();
            oGC.moveTo(x0 , y0);
            oGC.lineTo(x1, y1);
            oGC.stroke();
            oGC.restore();

        }

    }
</script>